<template>
  <div class="info-form">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
          <el-form-item label="用户账号">
            {{ userInfo.account }}
          </el-form-item>
          <el-form-item label="账号状态">
            {{ statusEnum[userInfo.status].label }}
          </el-form-item>
          <el-form-item label="所属角色">
            {{ formatName(userInfo.roleList) }}
          </el-form-item>
          <el-form-item label="所属部门">
            {{ formatName(userInfo.deptList) }}
          </el-form-item>
          <el-form-item label="用户名称" prop="name">
            <el-input placeholder="请输入" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input placeholder="请输入" v-model="ruleForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input placeholder="请输入" v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12" style="display: flex; justify-content: center">
        <upload-avatar v-model:image-url.sync="avatarImage" border-radius="50%" :api="savePersonalAvatarApi">
          <template #empty>
            <el-icon><Avatar /></el-icon>
          </template>
          <template #tip> 用户头像 </template>
        </upload-avatar>
      </el-col>
    </el-row>
    <el-button type="primary" @click="handleConfirm(ruleFormRef)">更新个人信息</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue"
import type { ElForm } from "element-plus"
import { ElMessage } from "element-plus"
import { useUserStore } from "@/stores/modules/user"
import { getRolePageListApi, savePersonalUserApi, savePersonalAvatarApi } from "@/api/modules/system"
import UploadAvatar from "@/components/Upload/UploadAvatar.vue"
import { statusEnum } from "@/utils/dict"

const userStore = useUserStore()

const avatarImage = ref<string>("")
const userInfo = computed(() => userStore.userInfo)
type FormInstance = InstanceType<typeof ElForm>

watch(
  () => avatarImage.value,
  () => {
    console.log("avatarImage", avatarImage.value)
    userStore.setUserInfo({ ...userInfo.value, imgPath: avatarImage.value })
  }
)
const roleList = ref<{ value: number; label: string }[]>([])
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<{ name: string; phone: string; email: string }>({ name: "", phone: "", email: "" })
const rules = {
  // name: [{ required: true, message: "必填项", trigger: "blur" }],
  // phone: [{ required: true, message: "必填项", trigger: "blur" }],
  // email: [{ required: true, message: "必填项", trigger: "blur" }]
}
const formatName = (list?: { id: number; name: string }[]) => {
  if (!list) return ""
  const str = list.map(item => item.name).join(",")
  return str
}
/** 获取 角色下拉 */
const getRoleList = () => {
  getRolePageListApi({ pageIndex: 1, pageSize: 9999 }).then(res => {
    res.data.result.forEach(e => {
      roleList.value.push({
        value: e.id,
        label: e.name
      })
    })
  })
}
/** 按钮 确定 */
const handleConfirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  const valid = await formEl.validate()
  if (!valid) return
  const res = await savePersonalUserApi({ id: userInfo.value.id, ...ruleForm.value })
  if (res.code !== "200") return ElMessage.error("更新个人信息失败")
  const info = { ...userInfo.value, name: ruleForm.value.name, phone: ruleForm.value.phone, email: ruleForm.value.email }
  userStore.setUserInfo(info)
  ElMessage.success("更新个人信息成功")
}
onMounted(() => {
  getRoleList()
  ruleForm.value = {
    name: userInfo.value.name,
    phone: userInfo.value.phone,
    email: userInfo.value.email
  }
  avatarImage.value = userInfo.value.imgPath
})
</script>

<style scoped lang="scss">
.info-form {
  padding: 0 20px;
}
</style>
